<template>
  <div>
    <el-image-viewer v-if="_d.imgVsible" :url-list="[_d.filePath]" @close="() => _d.imgVsible = false"/>
    <el-dialog
      v-else
      v-model="_d.ifVsible"
      title="预览文件"
      fullscreen
      modal-class="m-file-preview-modal">
      <iframe class="filename" :src="_d.filePath" frameborder="1"></iframe>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref, computed, onMounted } from "vue";

const imgRef = ref();

const _d = reactive({
  imgVsible: false,
  ifVsible: false,

  filePath: "", // 文件路径,
  isImg: false,
});
onMounted(() => {});

function open(fileUrl) {
  let arr = fileUrl.split('.');
  let suffix = arr[arr.length-1];
  _d.isImg = ['png', 'jpg', 'jpeg'].includes(suffix);
  _d.filePath = location.origin+'/'+fileUrl;
  if(_d.isImg) {
    _d.imgVsible = true;
  } else {
    _d.ifVsible = true;
  }
}


// 判断是否为图片

defineExpose({
  open
});
</script>

<style lang="scss">
.m-file-preview-modal {
  .el-dialog {
    display: flex;
    flex-direction: column;
    height: 100vh;
  }
  .el-dialog__header {
    .el-dialog__title {
      color: #fff;
      line-height: 34px;
    }
  }
  .el-overlay-dialog .el-dialog .el-dialog__body {
    flex: 1;
    height: 0;
    padding: 0 !important;
    max-height: none !important;
    .filename {
      display: block;
      margin: 0 auto;
      width: 100%;
      height: 100%;
      border: none;
    }
  }
}
</style>